<template>
    <div>
      <!-- 导航 -->
      <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                        
            </button>
            <router-link to="/" class="navbar-brand">WHUT南湖博物馆</router-link>
           
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
          
            <ul class="nav navbar-nav navbar-right">
                <li><router-link to="/record">预约记录</router-link></li>
                <li v-if="islogin==true"><router-link to="/login"><span class="glyphicon glyphicon-log-in"></span> Login</router-link></li>
              <li v-if="islogin==false"><a href="#" @click="logout"><span class="glyphicon glyphicon-log-out"></span> Exit</a></li>
            </ul>
            </div>
        </div>
      </nav>
  
      <div class="container-fluid bg-3 text-center">    
          <!-- 当前所在环节 -->
          <div class="row">
              <div class="fs midd">选择参观日期</div>
              <div class="col-sm-3"></div>
              <div class="col-sm-6">
                  <!-- <img class="img-responsive" src="../assets/流程1.png" alt="流程"> -->
                  <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
                      <el-step title="选择参观日期" ></el-step>
                      <el-step title="填写观众信息" ></el-step>
                  </el-steps>
              </div>
          </div>
          <!-- 分割线 -->
          <div class="row">     
              <div class="col-sm-12"> <img class="img-responsive" src="../assets/分割线.png" alt="Chania"></div>
          </div>
          
          
  
          <!-- 日期选择 -->
          <div class="bigbox" >
                  <div class="littlebox" v-for="n in 7" :key="n" @click="csbox($event,n)">
                      <p class="innerword">{{week['day' + n]}}</p>
                      <p class="innerword ht">有票</p>
                  </div>
          </div>
          
          <!-- 入馆时段 -->
          <div class="row">
              <div class="bigtimebox">
                      <div class=" gointime">
                          入馆时段
                          <div class=" panel-default innerword readytime datetime" @click="csdate($event,0)">
                                 上午 9：00-12：00
                          </div>
                          <div class=" panel-default innerword readytime datetime" @click="csdate($event,1)">
                                 下午 13：00-16：00
                          </div>
                      </div>
                  </div>
              <div class="col-sm-2"></div>
          </div>
  
  
          <!-- 预约按钮 -->
          <div class="row">
              <button type="button" class="btn btn-danger bt" @click="toinfo">立即预约</button>
          </div>
      </div><br>
  
  
      <div class="container-fluid text-center">
          <!-- <h4>预约须知：</h4> -->
  
      </div>
  
  </div>
  </template>
  
  <script>
  export default {
      name: 'IndexPage',
      components: {
      },
      data(){
          return{
            islogin:true,
            week:{
                day1:"",
                day2:"",
                day3:"",
                day4:"",
                day5:"",
                day6:"",
                day7:"",
            },
            date:-1,
            period:'',
            humnum:'',
            everynum:1000, //一天总的票数
          }
      },
      mounted() {
      const currentDate = new Date();
      for (let i = 1; i <= 7; i++) {
          const nextDate = new Date(currentDate);
          nextDate.setDate(currentDate.getDate() + i);
          const month = nextDate.getMonth() + 1;  
          const day = nextDate.getDate();
          this.$set(this.week, 'day' + i, `${month}月${day}日`);
      }
  
  
      this.$axios
          .post("/askdateinf")
          .then((response) => {
              // if (response.data.code == "200") {
              //     alert(response.data.msg);
              // } else {
              //     alert(response.data.msg);
              // }
              this.humnum=response.data
              
              const littleboxes = document.querySelectorAll('.littlebox');
              for (let i = 1; i <= 7; i++) {
                  let ask='d'+i
                  //console.log(response.data[ask])
                  if(response.data[ask]>=this.everynum){
                      littleboxes[i-1].classList.add('bad')
                      const htElements = littleboxes[i-1].getElementsByClassName('ht');
                      for (const htElement of htElements) {
                          htElement.innerHTML = '没票';
                      }
                  }
          }
  
          })
          .catch((err) => {
              console.log(err);
          });

        if(localStorage.getItem('token')!=null){
            this.islogin=false
        }
        else{
            this.islogin=true
        }
  
       }, 
  
      methods: {
             //登出
        logout(){
            localStorage.removeItem('name')
            localStorage.removeItem('uid')
            localStorage.removeItem('token')
            
            document.cookie='sessionid=;'
           
            this.$router.push('/login')
        },

          toinfo(){
              let ask='d'+this.date
              //console.log(ask)
              //console.log(this.humnum[ask])
      if(this.date==-1){
          alert("请选择日期和时间")
          return 
      }
      else if (this.humnum[ask]>=this.everynum){
          // alert("不够")
          return 
      }
      else if(this.period==''){
          alert("请选择日期和时间")
          return
      }
  
              this.$router.push({
                  name: 'info',
                  params: {
                  date: this.date,
                  period: this.period,
                  datestr:this.week['day'+this.date]
                  }
              })
          },
  
          csbox(event,n){
          this.date=n;
          const littleboxes = document.querySelectorAll('.littlebox');
          littleboxes.forEach((littlebox) => {
          littlebox.classList.remove('cbox');
          });
          const hasBadClass = event.currentTarget.classList.contains('bad');
          if (!hasBadClass) {
          event.currentTarget.classList.add('cbox');
      }else{
          this.date=-1
      }
          },
  
          csdate(event,i){    
          if(i==1){
              this.period='下午 13：00-16：00'
          }
          else {
              this.period='上午 9：00-12：00'
          }
          const dateboxes = document.querySelectorAll('.datetime');
          dateboxes.forEach((datebox) => {
          datebox.classList.remove('cbox');
          });
          event.currentTarget.classList.add('cbox');
          },
      }
  
  }
  </script>
  
  <style>
  .midd {
      margin: auto ;
      padding-left: 50px;
      padding-right: 50px;
  }
  
  .fs{
      font-size: 20px;
  }
  
  .bigtimebox{
  margin: auto;
  }
  
  .gointime{
      font-size: 20px;
      display: flex;
      padding-left: 250px;
      padding-right: 250px;
      justify-content: space-evenly;
      align-items: center;
  
  }
  
  .readytime{
      height: 50px;
      padding: 10px;
      width: 400px;
  }
  
  .datetime{
      
      align-items: center;
      justify-content: center;
      display: flex;
      border: 1px grey solid;
      border-radius: 3px;
  
  }
  
  .bigbox{
      
      width: auto;
      padding-left:30px ;
      padding-right:30px ;
      display: flex;
      flex-direction: row;
      margin: auto;
  }
  
  .littlebox{
      border: 1px grey solid;
      border-radius: 5px;
      margin: 30px;
      padding-top: 20px;
      width: 150px;
      height: 100px;
  
  }
  
  .cbox{
      border: 3px black solid;
  }
  
  .bt{
      margin-top: 10px;
  }
  
  .bad{
      
  }
  </style>